<%@ page language="java" session="true"
	contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Include the required JavaScript libraries: -->
<script src='/js/jquery/jquery.js' type="text/javascript"></script>
<script src='/js/jquery/jquery-ui.custom.js' type="text/javascript"></script>
<script src='/js/jquery/jquery.cookie.js' type="text/javascript"></script>

<link rel='stylesheet' type='text/css' href='skin/ui.dynatree.css'>
<script src='/js/jquery/jquery.dynatree.js' type="text/javascript"></script>

<!-- Add code to initialize the tree when the document is loaded: -->
<script type="text/javascript">
    $(function(){
        // Attach the dynatree widget to an existing <div id="document_tree"> element
        // and pass the tree options as an argument to the dynatree() function:
        $("#document_tree").dynatree({
        	initAjax: { url: "/sections.html",
        				data: { documentId: "${document.id}", parentId:"" }
        	},
            onActivate: function(node) {
                // A DynaTreeNode object is passed to the activation handler
                // Note: we also get this event, if persistence is on, and the page is reloaded.
                alert("You activated " + node.data.title);
            },
            persist: true,
    		onLazyRead: function(node){
        		node.appendAjax({url: "/sections.html",
                           data: { documentId: "1", parentId:"" }
            	});
            },
        });
    });
    </script>
</head>
<body>
	<div id="header">Header - ${document.id} - ${document.name}</div>

	<div id="content"></div>

	<!-- Add a <div> element where the tree should appear: -->
	<div id="document_tree"></div>

	<div id="footer">Footer</div>
	
	<input type="button" onclick="addRow()"; value="call" />


</body>
</html>
